vlwkaos' digital garden

Vue 요약

Vue는 전통적인 MVC 패턴을 확장하면서 단방향 흐름을 가지고 있다. Model의 데이터를 view에 맞게 가공하고 DOM event handler binding 역할을 수행한다.

Vue를 사용하기 위해서는 Vue instance를 생성해야한다. data, template, el, methods 외 기타 생명주기에 관련된 hook을 넘겨 줄 수 있다. 생명주기 관련 hook은 mounted, updated, destroyed 등이 있다.

new Vue({
  data: {
    a: 1,
  },
  created: function () {
    // this 는 vm 을 가리킴
    console.log("a is: " + this.a)
  },
})

상위, 하위 컴포넌트의 관계:

위에서 아래로 props가 전달된다.
아래서 위로 event를 발생시킨다.

Event Bus

별도의 vue instance생성 후 다음처럼 이벤트 발생시킴

eventBus.$emit("refresh", 10)

이벤트는 이렇게 핸들링 할 수 있다:

// 이벤트 버스 이벤트는 일반적으로 라이프 사이클 함수에서 수신
new Vue({
  created: function () {
    eventBus.$on("refresh", function (data) {
      console.log(data) // 10
    })
  },
})

Conditionals v-if

<span v-if="seen">Show only when 'seen'</span>

var app = new Vue({
  data: {
    seen: true
  }
})

List items for v-for

<ol>
    <li v-for="todo in todos">
    {{ todo.text }}
    </li>
</ol>

var app = new Vue({
  data: {
    todos: [
      { text: 'text1' },
      { text: 'text2' },
      { text: 'text3' }
    ]
  }
});

Handle user input v-on

<button v-on:click="reverseMessage">Reverse Message</button>

new app = new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Reusable component with props

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
    el: '#app',
    data: {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
})

<div id="app">
    <ol>
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
       </todo-item>
    </ol>
</div>

Vue instance의 data groceryList의 항목을 todo-item component의 'todo' props로 bind한다. key가 필요한 이유?

Referred in

Vue 뷰

Vue 요약